<template>
  <li :class="{ done: todo.done }">
    <input type="checkbox" v-model="todo.done" @click="toggle" />
    <span>{{ todo.text }}</span>
    <button @click="remove">删除</button>
  </li>
</template>

<script setup>
import { useTodoStore } from '../stores/todo'
const props = defineProps({
  todo: Object
})
const todoStore = useTodoStore()

function toggle() {
  todoStore.toggleTodo(props.todo.id)
}

function remove() {
  todoStore.removeTodo(props.todo.id)
}
</script>

<style scoped>
li {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
li:last-child {
  border-bottom: none;
}
li:hover {
  background: #f4faff;
}
input[type="checkbox"] {
  accent-color: #409eff;
  width: 18px;
  height: 18px;
  margin-right: 12px;
  transition: box-shadow 0.2s;
}
.done span {
  text-decoration: line-through;
  color: #aaa;
  transition: color 0.2s;
}
span {
  flex: 1;
  font-size: 16px;
  word-break: break-all;
}
button {
  margin-left: 8px;
  border-radius: 6px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #d9363e;
}
</style> 